<template>
	<van-list 
		v-model:loading="loading" 
		:finished="finished" 
		finished-text="没有更多了" 
		@load="onLoad"
	>
		<ul class="box">
			<li v-for="item in list" :key="item" @click="router.push({path:`/details/${item.proid}`,query:{proid:item.proid}})">
				<img :src="item.img1" />
				<p>{{item.proname}}</p>
				<h4>￥{{item.originprice}}</h4>
			</li>
		</ul>
	</van-list>
</template>

<script setup lang='ts'>
import { ListCount } from '@/api/loginapi';

import { ref } from 'vue';
import { useRouter } from 'vue-router'; 

const router = useRouter()

const loading = ref(false)
const finished = ref(false)

const list:any = ref([])
const count = ref(0)


const onLoad = () => {
	count.value++
	ListCount({ count: count.value,limitNum:10 }).then((res: any) => {
		console.log(res);
		if(res.code==200){
			list.value=list.value.concat(res.data)
			// 加载状态
			loading.value = false
				// 数据全部加载完成
			if(res.data.length == 0) {
				finished.value = true;
			}
		}

	})
}
</script>

<style lang="scss" scoped>
.van-list{
	margin-top: 20px;
}
.box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	li{
		width: 49%;
		
		img{
			width: 100%;
		}
		p{
			font-size: 13px;
    		line-height: 16px;
    		overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		h4{
			color: crimson;
			line-height: 30px;
			margin: 2px 0 12px;
		}
	}
}



</style>